<template>
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body
             :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
  >
    <!--搜索-->
    <div style="margin-bottom: 10px;">
      关键字：
      <el-input size="mini" style="width: 200px;margin-right: 10px;"/>
      <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
    </div>
    <!--地图-->
    <div id="drawpoint-map-container" class="drawpoint-map-container" v-if="open"></div>

    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="close">取消绘制</el-button>
      <el-button type="warning" @click="onClickClear">重新绘制</el-button>
      <el-button type="success" @click="finishDraw">绘制完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {Scene} from '@antv/l7'
import {GaodeMap} from '@antv/l7-maps'
import {DrawEvent, DrawPoint} from '@antv/l7-draw'

export default {
  name: 'drawpoint',
  props: {
    callback: {
      type: Function,
      default: (data) => {
      }
    }
  },
  data() {
    return {
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      scene: undefined,
      drawObj: undefined,
      jsonPoints: undefined
    }
  },
  methods: {
    show(title) {
      this.title = title
      this.open = true
      setTimeout(() => {
        this.initMap()
      }, 500)
    },
    close() {
      this.jsonPoints = undefined
      this.scene = undefined
      this.open = false
    },
    onClickClear() {
      this.drawObj.clear()
      this.jsonPoints = undefined
    },
    finishDraw() {
      if (this.jsonPoints === undefined) {
        this.$message.error('您还没有绘制路径，请先在地图上进行绘制')
      } else {
        this.callback(this.jsonPoints)
        this.close()
      }
    },
    mapDrawUpdated(features) {
      console.log(features)
      if (features && features.length) {
        let points = features[0].geometry.coordinates
        // this.jsonPoints = JSON.stringify(points)
        this.jsonPoints = points.join(',')
        console.log(this.jsonPoints)
      }
    },
    initMap() {
      const that = this
      let center
      if (this.$store.getters.cityCenter) {
        center = JSON.parse(this.$store.getters.cityCenter)
      } else {
        center = [116.397428, 39.90923]
      }
      // 全局加载高德地图API
      const map = new AMap.Map('drawpoint-map-container', {
        viewMode: '3D',
        resizeEnable: true, // 是否监控地图容器尺寸变化
        // mapStyle: 'amap://styles/7c5d81c55592164b6f658b34249e458f',
        center: center,
        zoom: 19,
        minZoom: 5
      })

      this.scene = new Scene({
        id: 'drawpoint-map-container',
        logoVisible: false,
        map: new GaodeMap({
          mapInstance: map
        })
      })

      this.scene.on('loaded', () => {
        that.drawObj = new DrawPoint(this.scene, {multiple: false})
        that.drawObj.enable()

        that.drawObj.on(DrawEvent.Change, this.mapDrawUpdated);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.drawpoint-map-container {
  width: 100%;
  height: 640px;
  overflow: hidden;
}

::v-deep .amap-copyright {
  display: none !important;
}
</style>
